<template>
  <dl class="bui-menu">
    <template v-for="(item, index) in list" v-if="item.meta" >
      <dd class="bui-menu-item menu-second" :class="{'bui-menu-item-collapsed':item.closed}" v-if="item.children" >
        <div class="bui-menu-title" @click="toggle(index,$event)"><s></s>
          <span class="bui-menu-title-text" onselectstart="return false">{{item.meta.desc}}</span>
        </div>
        <menu-tree :menus="item.children" :actived.sync="activedMenu"></menu-tree>
      </dd>
      <dd v-else class="bui-menu-item menu-leaf" :class="{'bui-menu-item-selected': actived==item.name}">
        <router-link :to="{name:item.name}" @click.stop.native="activeMenu(item.name)" >
          <em onselectstart="return false">{{item.meta.desc}}</em>
        </router-link>
      </dd>
    </template>
  </dl>
</template>

<script>
  export default {
    name: 'menuTree',
    props: {
      actived: String,
      menus: Array
    },
    data() {
      return {
        activedMenu: this.actived
      }
    },
    created() {
//      this.$on('update:actived', function (target) {
//        // console.log(target,"update:actived");
//      })
    },
    mounted() {

    },
    computed: {
      list() {
        var li = JSON.parse(JSON.stringify(this.menus));
        return li==null?[]:li;
      }
    },
    methods: {
      toggle(i,e) {
        var m = this.list[i];
        m.closed= !m.closed;
        this.$forceUpdate();
      },
      activeMenu(name) {
        // this.$store.commit('menuActived', name);
        this.$emit('update:actived', name)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to ddmit CSS to this component only -->
<style scoped>
  .bui-side-menu .bui-menu-title {
    padding: 8px 0 22px 5px;
  }
</style>


